<template>
	<div class="ll-page">
		<!-- S 查询 -->
		<div class="ll-page-query flex">
			<n-form
				inline
				:model="formValue"
				label-placement="left"
				:show-feedback="false"
				class="flex-1 flex-wrap"
			>
				<n-form-item label="日期：" path="value">
					<n-date-picker
						v-model:value="timeData"
						clearable
						type="daterange"
						@update:value="inputSearch"
					/>
				</n-form-item>
				<n-form-item label="站点：" path="value">
					<n-select
						v-model:value="formValue.locationId"
						:options="locationOptions"
						class="w-193px"
						clearable
						@update:value="inputSearch"
					/>
				</n-form-item>
				<n-form-item label="达运：" path="value">
					<n-input
						v-model:value="formValue.userSearch"
						placeholder="请输入达运名称/工号"
						:autosize="true"
						class="w-220px"
						@blur="inputSearch"
					/>
				</n-form-item>
				<n-form-item label="业务线：" path="value">
					<n-select
						v-model:value="formValue.type"
						:options="serviceLine"
						class="w-193px"
						@update:value="inputSearch"
					/>
				</n-form-item>
				<n-form-item label="在职状态：" path="value">
					<n-select
						v-model:value="formValue.status"
						:options="statusOptions"
						class="w-193px"
						@update:value="inputSearch"
					/>
				</n-form-item>
			</n-form>
			<n-space>
				<n-button color="rgba(0, 0, 0, 0.1)" text-color="#333333" @click="handelReset">
					重置
				</n-button>
			</n-space>
		</div>
		<n-space style="margin-top: 6px" class="mt-10px mr-10px" justify="end">
			<n-button type="primary" @click="addPermissionsFn">新增达运权限</n-button>
		</n-space>

		<!-- S 表格 -->
		<div class="ll-page-table">
			<n-data-table
				:columns="columns"
				:data="tabelData"
				:pagination="pagination"
				:remote="true"
				:loading="tableLoading"
				size="large"
				flex-height
				:style="{ height: '100%' }"
			/>
		</div>
		<div v-if="permissionsModelShow">
			<MemberModel
				:show-member="permissionsModelShow"
				@close="closModel"
				@refreshTable="getList()"
			/>
		</div>
		<!-- 弹窗 -->
		<n-modal
			v-model:show="showDinding"
			:show-icon="false"
			style="width: 520px; height: 360px"
			preset="dialog"
			title="换绑对接达人"
			@close="handleClose"
		>
			<div class="mt-15px">
				<div>该达运当前对接达人数：{{ showDindingRow.sumnum || 0 }}</div>
			</div>
			<div class="mt-20px h-200px">
				<n-select
					v-model:value="selectedValues"
					filterable
					placeholder="请输入达运名称/工号"
					:options="selectedOptions"
					:loading="selectedLoading"
					clearable
					remote
					:clear-filter-after-select="false"
					@search="handleSearch"
				/>
			</div>
			<div class="flex justify-end">
				<n-button
					color="rgba(0, 0, 0, 0.1)"
					text-color="#333333"
					class="close_btn"
					@click="handleClose"
				>
					取消
				</n-button>
				<n-button color="#1D6FE9" text-color="#fff" class="confirm_btn ml-1" @click="handleOk">
					确认
				</n-button>
			</div>
		</n-modal>
	</div>
</template>
<script setup>
import { h, ref, reactive, watch, onMounted } from 'vue';
import { NButton, useMessage } from 'naive-ui';

import dayjs from 'dayjs';
// 导入API接口
import {
	getAgentOperateUserList,
	getSingleList,
	setUpdateOpen,
	getUserSearch,
	postChangeBinding
} from '@/api/transportManagement';
// 导入模态框权限
import MemberModel from './memberModel.vue';
const message = useMessage();

// 站点
let locationOptions = ref([]);
//业务线
let serviceLine = reactive([
	{ label: '全部', value: '全部' },
	{ label: '直营', value: '直营' },
	{ label: '合营', value: '合营' },
	{ label: '代运营', value: '代运营' }
]);

const statusOptions = ref([
	{ label: '全部', value: 0 },
	{ label: '在职', value: 2 },
	{ label: '试用', value: 1 },
	{ label: '离职', value: 3 }
]);

onMounted(async () => {
	let res = await getSingleList(null);
	if (res && res.code === 200) {
		locationOptions.value = res.data.map((item) => {
			item.label = item.city;
			item.value = item.id;
			return item;
		});
	}
	getList();
});

// 表格
const columns = [
	{
		title: '站点',
		key: 'location',
		render: (row) => {
			if (row.location) {
				return row.location;
			} else {
				return '无';
			}
		}
	},
	{
		title: '达运名称',
		key: 'name'
	},
	{
		title: '业务线',
		key: 'type'
	},
	{
		title: '是否主职达运',
		key: 'isMainPosition',
		render(row) {
			return h(
				'span',
				{},
				{
					default: () => {
						if (row.isMainPosition === 0) {
							return '否';
						} else if (row.isMainPosition === 1) {
							return '是';
						}
					}
				}
			);
		}
	},
	{
		title: '在职状态',
		key: 'status',
		render: (row) => {
			switch (row.status) {
				case 1:
					return '试用';
				case 2:
					return '在职';
				case 3:
					return '离职';
			}
		}
	},
	{
		title: '邀约达人数量',
		key: 'num'
	},
	{
		title: '截止当前对接达人数',
		key: 'sumNum',
		render: (row) => {
			if (row.sumNum) {
				return row.sumNum;
			} else {
				return 0;
			}
		}
	},
	{
		title: '操作',
		width: '255px',
		render: (row) => {
			return [
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: {
							marginRight: '8px',
							fontSize: '14px',
							color: row.open == 0 ? '#1D6FE9' : '#F55F4E'
						},
						onClick: () => offerCode(row)
					},
					{
						default: () => {
							if (row.open == 0) {
								return '开放拓展邀约码';
							}
							if (row.open == 1) {
								return '关闭拓展邀约码';
							}
						}
					}
				),
				h(
					NButton,
					{
						size: 'small',
						text: true,
						type: 'primary',
						style: {
							marginRight: '8px',
							fontSize: '14px',
							display: row.status === 3 ? 'none' : 'inline'
						},
						onClick: () => bindingShow(row)
					},
					{ default: () => '换绑对接达人' }
				)
			];
		}
	}
];

const tabelData = ref([]);
const tableLoading = ref(false);

// 提交时间
const timeData = ref(null);
//导入模态框权限显示
const permissionsModelShow = ref(false);

// 查询条件
const formValue = reactive({
	userSearch: null,
	locationId: null,
	endTime: null,
	startTime: null,
	status: null,
	pageIndex: 1,
	pageSize: 10,
	type: null
});

// 更换绑定
const showDinding = ref(false);
const showDindingRow = ref(null);
const selectedOptions = ref([]);
const selectedLoading = ref(false);
const selectedValues = ref(null);

const bindingShow = (row) => {
	showDindingRow.value = row;
	showDinding.value = true;
};
const handleSearch = (query) => {
	getUserSearch({ search: query })
		.then((res) => {
			if (res.code == 200) {
				selectedOptions.value = res.data.map((item) => {
					item.label = item.name;
					item.value = item.userId;
					return item;
				});
			}
		})
		.catch((err) => {
			message.error(err.message);
		});
};
const handleClose = () => {
	showDinding.value = false;
	selectedValues.value = null;
};
const handleOk = () => {
	let params = {
		oldId: showDindingRow.value.userId,
		newId: selectedValues.value
	};
	postChangeBinding(params)
		.then((res) => {
			if (res.code == 200) {
				message.success(res.message);
				showDinding.value = false;
				getList();
			}
		})
		.catch((err) => {
			message.error(err.message);
		});
};

// 分页
const pagination = reactive({
	page: 1,
	pageSize: formValue.pageSize,
	pageSizes: [10, 20, 30, 40],
	showSizePicker: true,
	showQuickJumper: true,
	itemCount: 0,
	prefix({ itemCount }) {
		return `共${itemCount}条`;
	},
	onChange: (page) => {
		pagination.page = page;
		formValue.pageIndex = page;
		getList();
	},
	onPageSizeChange: (pageSize) => {
		pagination.pageSize = pageSize;
		formValue.pageSize = pageSize;
		formValue.pageIndex = 1;
		pagination.page = 1;
		getList();
	}
});
// 拓展邀约码
const offerCode = (row) => {
	let params = {
		userId: row.userId,
		open: row.open == 0 ? 1 : 0
	};
	setUpdateOpen(params)
		.then((res) => {
			if (res.code == 200) {
				message.success(res.message);
				getList();
			}
		})
		.catch((err) => {
			message.error(err.message);
		});
};
// 获取列表
const getList = async () => {
	formValue.endTime =
		timeData.value === null ? null : dayjs(timeData.value[1]).format('YYYY-MM-DD') + ' 23:59:59';
	formValue.startTime =
		timeData.value === null ? null : dayjs(timeData.value[0]).format('YYYY-MM-DD') + ' 00:00:00';

	if (formValue.status == 0) {
		delete formValue.status;
	}

	if (formValue.type == '全部') {
		delete formValue.type;
	}

	tableLoading.value = true;
	try {
		let res = await getAgentOperateUserList(formValue);
		tableLoading.value = false;
		if (res && res.code === 200) {
			tabelData.value = res.data.data;
			pagination.itemCount = res.data.rowCount;
		}
	} catch (error) {
		tableLoading.value = false;
	}
};

//搜索条件
const inputSearch = () => {
	formValue.pageIndex = 1;
	pagination.page = 1;
	getList();
};

// 重置
const handelReset = () => {
	resetData();
	getList();
};
const resetData = () => {
	formValue.userSearch = null;
	formValue.type = null;
	formValue.locationId = null;
	formValue.endTime = null;
	formValue.startTime = null;
	formValue.status = null;
	formValue.pageIndex = 1;
	formValue.pageSize = 10;
	pagination.page = 1;
	timeData.value = null;
};
const addPermissionsFn = () => {
	permissionsModelShow.value = true;
};
const closModel = (val) => {
	permissionsModelShow.value = val;
};
</script>

<style lang="less" scoped>
.ll-page {
	height: 100%;
	flex-direction: column;
	display: flex;
	background-color: #ffffff;
	padding: 10px;
	&-query {
		background: @bg;
		padding: @padding-10 @padding-10 0 @padding-10;
		margin-right: 10px;
		margin-left: 10px;
		margin-top: 10px;
		border-radius: 3px;
		border: 1px solid #f0f0f0;
	}
	&-table {
		padding: 10px;
		overflow: hidden;
		flex: 1 1 0%;
	}
}
.n-form-item {
	margin-bottom: @margin-10;
}

::v-deep(.n-data-table .n-data-table-td) {
	padding: 19px;
}
</style>
